<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport"
        content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <meta name="format-detection" content="telephone=no, email=no"/>
  <meta charset="UTF-8">
  <title>优购优品网</title>
  <link rel="stylesheet" href="${request.contextPath}/static/front/themes/css/core.css">
  <link rel="stylesheet" href="${request.contextPath}/static/front/themes/css/icon.css">
  <link rel="stylesheet" href="${request.contextPath}/static/front/themes/css/home.css">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
</head>
<body>
<div id="classify">
<#include "common/header-nav.ftl">
  <section class="aui-scroll-contents">
    <div class="aui-scroll-box" data-ydui-scrolltab>
      <div class="aui-scroll-nav">
        <#list classifyList as list>
           <a href="#" class="aui-scroll-item aui-crt" onclick="showChild(${list.classifyId})">
             <div class="aui-scroll-item-icon"></div>
             <div class="aui-scroll-item-text">${list.classifyName}</div>
           </a>
        </#list>
      </div>
      <div class="aui-scroll-content">
        <#list classifyList as list>
          <div class="aui-scroll-content-item">
            <#if list.classifyImg?? >
              <div class="aui-class-img">
                <img src="${request.contextPath}${list.classifyImg}" alt="">
              </div>
            </#if>
            <h2 class="aui-scroll-content-title">${list.classifyName}</h2>
            <section class="aui-grid-content">
              <div class="aui-grid-row aui-grid-row-clear" id="child${list.classifyId}">
                <#--<a href="my-products-class.html" class="aui-grid-row-item">
                  <i class="aui-icon-large aui-icon-sign"><img
                      src="${request.contextPath}/front/themes/img/ad/x-sf-1.jpg" alt=""></i>
                  <p class="aui-grid-row-label">手机数码</p>
                </a>
                <a href="my-products-class.html" class="aui-grid-row-item">
                  <i class="aui-icon-large aui-icon-sign">
                  <img src="${request.contextPath}/front/themes/img/ad/x-sf-2.jpg" alt=""></i>
                  <p class="aui-grid-row-label">笔记本</p>
                </a>-->
              </div>
            </section>
          </div>
        </#list>
      </div>
    </div>
  </section>
<#include "common/footer-nav.ftl">
  <input type="hidden" id="defaultClassifyId" value="${defaultClassifyId!''}">
</div>
<script src="${request.contextPath}/static/front/themes/js/jquery.min.js"></script>
<script src="${request.contextPath}/static/front/themes/js/aui.js"></script>
<script src="${request.contextPath}/static/common/vue.min.js"></script>
<script src="${request.contextPath}/static/common/axios.min.js"></script>
<script src="${request.contextPath}/static/common/common.js?v=${staticVersion}"></script>
<script type="text/javascript">
  $(document).ready(function(){
    var defaultClassifyId = $("#defaultClassifyId").val();
    if(null!=defaultClassifyId && defaultClassifyId != ''){
      showChild(defaultClassifyId);
    }
  });

  function showChild(parentId){
    var url = '${request.contextPath}/classify/getClassify';
    var data = {
      parentId: parentId
    };
    var result = ajaxPost(url,data);
    if(result != null && null!= result.data){
      var childHtml = '';
      var classifyList = result.data.classifyList;
      if(null != classifyList && classifyList.length>0) {
        for (var i = 0; i < classifyList.length; i++) {
          var classifyId = classifyList[i].classifyId;
          var classifyImg = classifyList[i].classifyImg;
          var classifyName = classifyList[i].classifyName;
          childHtml += '<a href="${request.contextPath}/product/index?classifyId='+classifyId+'" class="aui-grid-row-item">';
          childHtml += '<i class="aui-icon-large aui-icon-sign">';
          childHtml += '<img src="${request.contextPath}'+classifyImg+'" alt=""></i>';
          childHtml += '<p class="aui-grid-row-label">'+classifyName+'</p>';
          childHtml += '</a>';
        }
      }
      $("#child"+parentId).html(childHtml);
    }
  }


  /*var url = '/classify/getClassify';
  axios({
    method: 'post',
    url: url,
    data: {
      parentId: parentId
    },
    headers: {"token": 'loginUser:0000:6fe072c8-9a15-40ae-b538-a2988feb143f'}
  }).then(function (response) {
    var data = response.data;
    console.log(data);
    if(!data.success){
      alert(data.message);
      return false;
    }
    var childHtml = '';
    var classifyList = data.data.classifyList;
    if(null != classifyList && classifyList.length>0) {
      for (var i = 0; i < classifyList.length; i++) {
        var classifyImg = classifyList[i].classifyImg;
        var classifyName = classifyList[i].classifyName;
        childHtml += '<a href="my-products-class.html" class="aui-grid-row-item">';
        childHtml += '<i class="aui-icon-large aui-icon-sign">';
        childHtml += '<img src="'+classifyImg+'" alt=""></i>';
        childHtml += '<p class="aui-grid-row-label">'+classifyName+'</p>';
        childHtml += '</a>';
      }
    }
    $("#child"+parentId).html(childHtml);
  }).catch(function (error) { // 请求失败处理
    console.log(error);
  });*/

  /*var app = new Vue({
    el: '#classify',
    data() {
      return {
        message: 'Hello Vue.js!',
        token: 'loginUser:0000:83df8cdf-bfc2-4325-a9bb-679ce47ac6e5',
        oneClassifyList: []
      }
    },
    mounted() {
       this.initClassifyTwoLevel(2);
    },
    methods: {
      initClassifyTwoLevel: function (parentId) {
        var vm = this
        var url = '/classify/getClassify'
        axios({
          method: 'post',
          url: url,
          data: {
            parentId: parentId
          },
          headers: {"token": this.token}
        }).then(function (response) {
          var data = response.data;
          var classifyList = data.data.classifyList;
          vm.oneClassifyList = classifyList;
          console.log(data);
        }).catch(function (error) { // 请求失败处理
          console.log(error);
        });
      }
    }
  });*/
  // app.initClassifyOneLevel();
</script>

</body>
</html>